<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const menu = [
  {
    name: "投票大厅",
    path: "/voteFront",
    icon: "",
  },
  {
    name: "投票排行",
    path: "/voteRanking",
    icon: "",
  },
  {
    name: "投票统计",
    path: "/hotVote",
    icon: "",
  },
  {
    name: "个人中心",
    path: "/person",
    icon: "",
  },
];

const toLogin = () => {
  localStorage.clear();
};
const username = localStorage.getItem("username");
const activeIndex = ref();
activeIndex.value = localStorage.getItem("activeIndex");
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    localStorage.setItem("activeIndex", newValue);
    activeIndex.value = newValue;
  },
  { immediate: true }
);
const user = localStorage.getItem("user");
</script>
<template>
  <div class="content">
    <el-row class="menu">
      <el-col :span="4">
        <span class="logo" v-if="user != 1">投票系统(普通用户)</span>
        <span class="logo" v-else>投票系统(管理员)</span>
      </el-col>
      <el-col :span="9">
        <el-menu
          active-text-color=" #f3d19e"
          background-color=" #606266"
          :ellipsis="false"
          class="el-menu-vertical-demo"
          :default-active="activeIndex"
          text-color="#fff"
          mode="horizontal"
          style="border-bottom: none"
          v-if="user != 1"
          router
        >
          <el-menu-item v-for="(item, index) in menu" :index="item.path">
            <router-link :to="item.path">
              <span style="margin-right: 0px">{{ item.name }}</span>
            </router-link>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="4">
        <el-input v-model="input1" placeholder="请输入" v-if="user != 1">
          <template #prepend>搜索</template>
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="2"> </el-col>
      <el-col :span="1" v-if="user == ''">
        <router-link to="login">登录</router-link>
      </el-col>
      <el-col :span="1" v-if="user == ''">
        <a href="">注册</a>
      </el-col>
      <el-col :span="1" style="margin-top: 10px" v-else>
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </el-col>

      <el-col :span="4">
        <el-tooltip placement="bottom">
          用户：{{ username }}
          <template #content>
            <router-link to="login" @click="toLogin">退出登录</router-link>
          </template>
        </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.content {
  background-color: #606266;
  width: 100%;
  height: 100%;
  color: #ffffff;
}

.logo {
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
}

.menu {
  line-height: 60px;
  font-size: 20px;
}
</style>
